<script setup>
import {reactive, ref} from "vue";
const show=ref(false)
const dialogVisible = ref(false)
const formLabelWidth = '140px';
import {useUserStore} from "@/store/modlues/user/user.js";
import { useRouter } from "vue-router";
import {ElMessage} from "element-plus";
const router=useRouter()
const userStore = useUserStore();
const isLogin=()=>{
  if (userStore.user!==''&&userStore.user.userRole==='teacher'){
      router.replace('/register_1')
  }
  if(userStore.user.userRole==='judge'){
    ElMessage.warning("无法报名")
    return
  }
  dialogVisible.value=true
}
const form=reactive({
  userAccount: "",
  userPassword: ""
})
//校验弹框框输入
const rules={
  userAccount:[
    {required:true,message:'请输入用户名',trigger: 'blur'}
  ],
  userPassword:[
    {required:true,message:'请输入密码',trigger: 'blur'}
  ],
  oldPassword:[
    {required:true,message:'请输入旧密码',trigger: 'blur'}
  ],
  newPassword:[
    {required:true,message:'请输入新密码',trigger: 'blur'}
  ],
  newPasswordConf:[
    {required:true,message:'请输入新密码',trigger: 'blur'}
  ],

};
</script>
<template>
  <div>
    <div>
      <img  @click="isLogin"   style="cursor: context-menu;" class="index1" src="../assets/index/index.png"/>
    </div>
    <div class="back">
      <div>
        <img  class="index1" src="../assets/index/mid.png">
      </div>
      <div style="display: flex;flex-direction: row;">
        <div style="display: flex;flex-direction: column;margin-left: 15%;">
          <div class="log1" style="margin-top: 10px;"></div>
          <div class="log1" style="margin-top: 19px;"></div>
          <div class="log1" style="margin-top: 19px;"></div>
        </div>

        <div class="back-left">
          <a class="link" href="http://mchat-chengmj.oss-cn-beijing.aliyuncs.com/%E5%85%B3%E4%BA%8E%E5%85%AC%E5%B8%832023%E5%B9%B4%E5%85%A8%E5%9B%BD%E8%81%8C%E4%B8%9A%E9%99%A2%E6%A0%A1%E6%8A%80%E8%83%BD%E5%A4%A7%E8%B5%9B%E5%BE%B7%E8%82%B2%E4%B8%8E%E6%80%9D%E6%83%B3%E6%94%BF%E6%B2%BB%E6%95%99%E8%82%B2%E6%9C%89%E5%85%B3%E8%B5%9B%E9%A1%B9%E7%8E%B0%E5%9C%BA%E5%86%B3%E8%B5%9B%E5%85%A5%E5%9B%B4%E5%90%8D%E5%8D%95.docx" >关于公布2023年全国职业院校技能大赛德育与思想政治教育有关赛项现场决赛入围名单</a>
          <a class="link" href="http://mchat-chengmj.oss-cn-beijing.aliyuncs.com/%E5%85%B3%E4%BA%8E%E4%B8%BE%E5%8A%9E2023%E5%B9%B4%E5%85%A8%E5%9B%BD%E8%81%8C%E4%B8%9A%E9%99%A2%E6%A0%A1%E6%8A%80%E8%83%BD%E5%A4%A7%E8%B5%9B%E6%95%99%E5%AD%A6%E8%83%BD%E5%8A%9B%E6%AF%94%E8%B5%9B%E5%86%B3%E8%B5%9B%E6%9C%89%E5%85%B3%E4%BA%8B%E9%A1%B9%E7%9A%84%E9%80%9A%E7%9F%A5.docx" >关于举办2023年全国职业院校技能大赛教学能力比赛决赛有关事项的通知</a>
          <a class="link" href="https://mchat-chengmj.oss-cn-beijing.aliyuncs.com/%E6%95%99%E8%82%B2%E9%83%A8%E5%8A%9E%E5%85%AC%E5%8E%85%E5%85%B3%E4%BA%8E%E4%B8%BE%E5%8A%9E2023%E5%B9%B4%E5%85%A8%E5%9B%BD%E8%81%8C%E4%B8%9A%E9%99%A2%E6%A0%A1%E6%8A%80%E8%83%BD%E5%A4%A7%E8%B5%9B%E5%BE%B7%E8%82%B2%E4%B8%8E%E6%80%9D%E6%83%B3%E6%94%BF%E6%B2%BB%E6%95%99%E8%82%B2%E6%9C%89%E5%85%B3%E8%B5%9B%E9%A1%B9%E7%9A%84%E9%80%9A%E7%9F%A5.docx" >教育部办公厅关于举办2023年全国职业院校技能大赛德育与思想政治教育有关赛项的通知</a>
        </div>
        <div style="display: flex;flex-direction: column;margin-left: 3%;">
          <div class="log2" style="margin-top: 10px;"></div>
          <div class="log2" style="margin-top: 19px;"></div>
          <div class="log2" style="margin-top: 19px;"></div>
        </div>
        <div class="back-right">
          <a class="link" href="http://mchat-chengmj.oss-cn-beijing.aliyuncs.com/2023%E5%B9%B4%E5%85%A8%E5%9B%BD%E8%81%8C%E4%B8%9A%E9%99%A2%E6%A0%A1%E6%8A%80%E8%83%BD%E5%A4%A7%E8%B5%9B%E6%80%9D%E6%83%B3%E6%94%BF%E6%B2%BB%E6%95%99%E8%82%B2%E8%AF%BE%E7%A8%8B%E6%95%99%E5%AD%A6%E8%83%BD%E5%8A%9B%E6%AF%94%E8%B5%9B%E6%96%B9%E6%A1%88.docx" >2023年全国职业院校技能大赛思想政治教育课程教学能力比赛方案</a>
          <a class="link" href="http://mchat-chengmj.oss-cn-beijing.aliyuncs.com/%E6%95%99%E8%82%B2%E9%83%A8%E5%8A%9E%E5%85%AC%E5%8E%85%E5%85%B3%E4%BA%8E%E4%B8%BE%E5%8A%9E2023%E5%B9%B4%E5%85%A8%E5%9B%BD%E8%81%8C%E4%B8%9A%E9%99%A2%E6%A0%A1%E6%8A%80%E8%83%BD%E5%A4%A7%E8%B5%9B%E5%BE%B7%E8%82%B2%E4%B8%8E%E6%80%9D%E6%83%B3%E6%94%BF%E6%B2%BB%E6%95%99%E8%82%B2%E6%9C%89%E5%85%B3%E8%B5%9B%E9%A1%B9%E7%9A%84%E9%80%9A%E7%9F%A5.docx" >2023年全国职业院校技能大赛中等职业学校班主任能力比赛方案</a>
          <a class="link" href="http://mchat-chengmj.oss-cn-beijing.aliyuncs.com/2023%E5%B9%B4%E5%85%A8%E5%9B%BD%E8%81%8C%E4%B8%9A%E9%99%A2%E6%A0%A1%E6%8A%80%E8%83%BD%E5%A4%A7%E8%B5%9B%E6%95%99%E5%AD%A6%E8%83%BD%E5%8A%9B%E6%AF%94%E8%B5%9B%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E7%AD%94%E7%96%91.docx" >2023年全国职业院校技能大赛教学能力比赛常见问题答疑</a>
        </div>
      </div>



      <!-- 底部 -->
      <div class="bottom">
        <text class="black-text">联系电话：王老师 18888888888 ｜ 技术支持：唐工17706521231 ｜ 服务电话：朱老师1596618040 ｜ ＠山东依智科技产业开发集团有限公司＠2023鲁ICP备2020045516号—3</text>
      </div>

      <div class="black-bottom">
        <text class="black-text" style="margin-top: 5px;margin-bottom: 8px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
      </div>
    </div>
  </div>
  <!-- 登录框 -->
  <el-dialog v-model="dialogVisible" title="欢迎登录！" style="width:500px;border-radius: 3%;top: 80px;" >
    <el-form :model="form" :rules="rules">
      <el-form-item label="用户名" :label-width="formLabelWidth" prop="userAccount">
        <el-input style="width: 230px" v-model="form.userAccount" autocomplete="off" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="userPassword">
        <el-input style="width: 230px" v-model="form.userPassword" autocomplete="off" type="password" placeholder="请输入"/>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false;addData()">
                登录
                </el-button>
            </span>
    </template>
  </el-dialog>

</template>

<style scoped>
.dropdown{

  margin-left: 10px;
  margin-top: 20px;
}

.userIcon{
  margin-top: 10px;
  margin-left: 50px;
}


.example-showcase .el-dropdown-link {

  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}


.el-button--text {
  margin-right: 10px;

}
.el-input {
  width: 250px;
}
.dialog-footer button:first-child {
  margin-right: 40%;
  width: 100px;
}

.bottom{
  margin-top: 80px;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.black-text{

  color:#afafaf;
  font-size: 11px;

}

.black-bottom{
  border-top: #747474 0.3px solid;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.link{
  font-size: 13px;
}

.log2{

  display: inline-block;
  width:8px;
  height:8px;
  background-color: #bfbfbf;
  transform: rotate(45deg);

}

.log1{

  display: inline-block;
  width:8px;
  height:8px;
  background-color: #94b4e5;
  transform: rotate(45deg);

}

.back-right{
  display: flex;
  flex-direction: column;
  margin-left: 13px;
}


.back-left{
  display: flex;
  flex-direction: column;
  margin-left: 13px;
}

.back{

  display: flex;
  flex-direction: column;
  background-color: #F5F7F9;
}

.menu{
  overflow: hidden;
  width: 580px;
}
.top{

  display: flex;
  width: 100%;
  height: 60px;
}

.title{
  font-weight: bold;
  width: 300px;
  color: #426FFF;
  font-size: 20px;
  margin-top: 15px;
  margin-left: 15%;
  margin-right: 35px;
}

.el-menu-popper-demo{
  transform: rotateX(180deg);
}

.top-text{
  transform: rotateX(180deg);
}

.top-button{
  margin-top: 15px;
  margin-left: 50px;
}

.index1{
  width: 100%;
  height: 100%;

}

a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {background-color:#F5F7F9;color: #678afd;}

</style>